<template>
  <div>
    <div
      class="share-wrapper"
      v-if="getdataflag == 'getdata' || getdataflag == 'dataerr'"
    >
      <div class="link-app-wrapper" id="openinstalltop">
        <div class="logo-wrapper">
          <span class="icon"></span>
        </div>
        <div class="btn-wrapper">
          <van-button style="border-radius: 0.1rem" type="info" size="small"
            >打开看看
          </van-button>
        </div>
      </div>
      <div class="toplinkcopy"></div>
      <div class="havedata" v-if="getdataflag == 'getdata'">
        <div class="pic-video-wrapper">
          <div class="pic-video-switch" @click="handlePicVideoSwitch">
            <p class="txt pic-txt">
              <transition name="pic">
                <span v-show="picVideoSwitch === 1">图片</span>
              </transition>
            </p>
            <p class="txt video-txt">
              <transition name="video">
                <span v-show="picVideoSwitch === 0">视频</span>
              </transition>
            </p>
            <div class="btn" :class="{ 'right-btn': picVideoSwitch === 1 }">
              {{ picVideoTxt }}
            </div>
          </div>
          <div class="pic-wrapper" v-if="picVideoSwitch === 0">
            <van-swipe
              class="my-swipe"
              :autoplay="3000"
              indicator-color="white"
              :show-indicators="false"
            >
              <van-swipe-item
                v-for="(pic, index) in swiperData"
                :key="index"
                style="
                  display: flex;
                  justify-content: center;
                  align-items: center;
                "
              >
                <van-image width="100%" height="100%" :src="pic" />
              </van-swipe-item>
            </van-swipe>
          </div>
          <div
            class="video-container"
            ref="videocontainer"
            v-if="picVideoSwitch === 1"
          >
            <video
              v-if="videoData"
              playsinline
              disablePictureInPicture
              muted
              controls
              loop
              ref="videoPlayer"
              :poster="this.productDetail.pic"
            >
              <source :src="videoData" />
            </video>
            <van-empty style="height: 6.48rem" v-else description="暂无视频" />
          </div>
          <div class="event-sponsor-wrapper" v-if="eventIsShow()">
            <div class="event">赛事有奖</div>
            <div class="sponsor">本商品由 {{pmsProductActiveDto.sponsorName}} 特约赞助</div>
          </div>
        </div>
        <div class="commodity-information-wrapper">
          <div class="shop-title-txt">
            <span class="icon icon1" v-if="eventIsShow()"></span>
            <span class="icon2" v-else>未参赛商品</span>
            <p class="txt">{{ productDetail.name }}</p>
          </div>
          <div class="shop-price-wrapper">
            <div class="preferential-price">
              <span class="icon">￥</span>
              <p class="price">{{ productDetail.price }}</p>
              <p class="txt">优惠价</p>
            </div>
            <div class="discounted-price">
              <span class="txt txt1">￥{{ productDetail.price }}</span>
              <span class="txt">商城价</span>
            </div>
          </div>
          <div class="shop-rights-and-interests-wrapper">
            <template v-for="(item, index) in productDetail.serviceIds">
              <div
                :key="index"
                class="counterpoise-item return-shop"
                v-if="item === '1'"
              >
                七天无理由退货
              </div>
            </template>

            <!--            <div class="counterpoise-item full-shop">满减优惠</div>-->
          </div>
          <div class="sales-volume-wrapper">
            <p class="txt sold">已售 {{ productDetail.sale }} 件</p>
            <span class="segmentation"></span>
            <p class="txt buy">{{ productDetail.sale }}人购买</p>
          </div>
        </div>
        <div class="area-specifications-wrapper">
          <div class="area-wrapper">
            <span class="icon"></span>
            <span class="area-txt">北京市东城区</span>
            <div class="express-delivery-wrapper">
              <span v-if="productDetail.freight === 0">快递：免运费</span>
              <span v-if="productDetail.freight === 1"
                >快递：￥{{ productDetail.unifiedFreight }}</span
              >
            </div>
          </div>
          <div class="segmentation"></div>
          <div class="specifications-wrapper">
            <span class="icon-txt">规格</span>
            <div class="message-txt" @click="openShopping">
              <span class="txt">请选择</span>
              <span class="icon">&gt;</span>
            </div>
          </div>
        </div>
        <div class="picdetaildiv">
          <div class="toptitle">商品详情</div>
          <div class="detailhtml">
            <pre ref="detailhtml"></pre>
          </div>
        </div>
      </div>
      <div class="havedata" v-if="getdataflag == 'dataerr'">
        <div class="emptydivtop">
          <van-empty
            image="error"
            description="网络繁忙,请稍后再试 !"
            image-size="300"
          />
        </div>
      </div>
      <CustomerService
        @openShopping="openShopping"
        class="botomfix"
        v-if="getdataflag == 'getdata'"
      />
      <van-popup
        v-model="showBottom"
        position="bottom"
        :style="{ height: '8.6rem' }"
      >
        <SpecificationsDetail
          :skuListValue="skuStockListData"
          :productDetailData="productDetail"
        />
      </van-popup>
      <!-- 下面登录的poup组件 -->
      <div class="loginpopdiv">
        <van-popup
          v-model="loginpopflag"
          round
          closeable
          position="bottom"
          :close-on-click-overlay="false"
        >
          <div class="loginpopflag">
            <h2>岘视号登录</h2>
            <div style="margin-top: 5%">
              <van-field
                v-model="telphonenumber"
                ref="phoneInp"
                label="手机号"
                type="number"
                :maxlength="11"
                placeholder="请输入手机号"
              />
              <van-field
                v-model="rulenumber"
                center
                clearable
                label="验证码"
                :maxlength="4"
                placeholder="请输入验证码"
              >
                <template #button>
                  <van-button
                    size="small"
                    type="info"
                    @click="handlersendcode"
                    :disabled="countdown > 0"
                    >{{
                      countdown > 0 ? `${countdown}秒后重试` : "发送验证码"
                    }}</van-button
                  >
                </template>
              </van-field>
              <van-field />
            </div>
            <div style="display: flex; align-items: center">
              <van-checkbox v-model="radio" icon-size="24px"> </van-checkbox>
              <div class="radiodiv">
                已阅读并同意<strong style="color: blue" @click="handlertopolicy"
                  >&nbsp;隐私政策&nbsp;</strong
                >和首次登录将自动注册
              </div>
            </div>
            <div style="width: 90%; margin-top: 8%">
              <van-button type="info" block round @click="handlerlogin"
                >登录</van-button
              >
            </div>
          </div>
        </van-popup>
      </div>
      <!--        <div class="productdetaildiv">-->
      <!--          <van-popup-->
      <!--            v-model="productpopupflag"-->
      <!--            round-->
      <!--            closeable-->
      <!--            position="bottom"-->
      <!--            :close-on-click-overlay="false"-->
      <!--          >-->
      <!--            <van-cell-->
      <!--              title="sssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssss"-->
      <!--              icon="location-o"-->
      <!--              style="margin-top: 10%"-->
      <!--              is-link-->
      <!--            />-->
      <!--            <div class="productinfo">-->
      <!--              <div-->
      <!--                class="productattr"-->
      <!--                v-for="(item, index) in spData"-->
      <!--                :key="geteleid()"-->
      <!--              >-->
      <!--                ceshi-->
      <!--              </div>-->
      <!--            </div>-->
      <!--          </van-popup>-->
      <!--        </div>-->
    </div>
    <div v-if="getdataflag == 'startdata'">
      <div class="skeleton">
        <div class="childrenskeleton" style="height: 8%"></div>
        <div class="childrenskeleton" style="height: 45%"></div>
        <div class="childrenskeleton" style="height: 18%"></div>
        <div class="childrenskeleton" style="height: 11%"></div>
        <div class="childrenskeleton" style="height: 18%"></div>
      </div>
    </div>
  </div>
</template>

<script>
import { getProduct } from "@/api/product";
import CustomerService from "./components/CustomerService";
import SpecificationsDetail from "./components/SpecificationsDetail";
import request from "@/unitls/request";
import { Toast } from "vant";
import { v4 as uuidv4 } from "uuid";
import axios from "axios";
export default {
  data() {
    return {
      productpopupflag: true,
      countdown: 0,
      timer: null,
      radio: "",
      showBottom: false,
      loginpopflag: false,
      rulenumber: "",
      pmsProductActiveDto: {},
      telphonenumber: "",
      picVideoSwitch: 0, //0是图片 1是视频
      picVideoTxt: "图片", //按钮上的图片
      productDetail: {},
      skuStockListData: [],
      swiperData: [], //轮播图数据
      videoData: "", //视频数据
      isPlaying: false,
      showPlayButton: true,
      hideButtonTimeout: null,
      casusediv: "",
      videocontainer: "",
      resizeObserver: null,
      clickflag: true,
      detailhtml: "",
      getdataflag: "startdata",
      typeofmobile: "",
      productId: "",
      Xs_token: "",
      mytoken: "",
      spData: [],
      redisId: "",
    };
  },
  components: {
    CustomerService,
    SpecificationsDetail,
  },
  mounted() {
    //获取商品详情
    this.getProductDetail();
  },
  watch: {
    loginpopflag: {
      immediate: true,
      handler(newval) {
        if (newval) {
          this.rulenumber = "";
          this.radio = false;
        }
      },
    },
  },
  beforeDestroy() {
    // 组件销毁前清除定时器
    if (this.timer) {
      clearInterval(this.timer);
    }
  },
  methods: {
    async handlerlogin() {
      if (
        !this.telphonenumber.trim() ||
        this.telphonenumber.trim().length != 11
      ) {
        Toast("请输入正确的手机号");
        return;
      }
      if (!this.rulenumber.trim() || this.rulenumber.trim().length != 4) {
        Toast("请输入正确的验证码");
        return;
      }
      if (!this.radio) {
        Toast("请勾选协议");
        return;
      }
      try {
        let result = await request({
          url: `xs-server-user/user/phoneH5Login`,
          method: "post",
          data: {
            phone: this.telphonenumber,
            phoneValue: this.rulenumber,
            redisId: this.redisId,
          },
        });
        if (result.data.success) {
          Toast({
            type: "success",
            message: "登录成功",
          });
          localStorage.setItem("logintoken", result.data.result.token);
          this.loginpopflag = false;
        } else {
          this.redisId = "";
          Toast("请求出错,请重新登录");
          return;
        }
        console.log(result, "登录成功");
      } catch (error) {
        this.redisId = "";
        Toast("服务繁忙,请稍后再试");
        return;
      }
    },
    geteleid() {
      return uuidv4();
    },
    async handlersendcode() {
      if (this.telphonenumber.trim().length != 11) {
        Toast("请输入正确的手机号");
        return;
      }
      try {
        if (this.timer) {
          clearInterval(this.timer);
        }
        this.countdown = 60;
        this.timer = setInterval(() => {
          this.countdown--;
          if (this.countdown <= 0) {
            clearInterval(this.timer);
          }
        }, 1000);
        let result = await request({
          url: `xs-server-user/user/sendPhoneCode`,
          method: "post",
          data: {
            phone: this.telphonenumber,
            type: 1,
          },
        });
        if (result.data.success) {
          this.redisId = result.data.result.redisId;
          console.log("这是成功的验证码", result.data.result);
        }
      } catch (error) {
        console.log("error", error);
        this.redisId = "";
        Toast("服务繁忙,请稍后再试");
        return;
      }
    },

    handlertopolicy() {
      window.open("https://www.xianshiapp.com/privacypolicy");
    },
    openShopping() {
      const token = localStorage.getItem("logintoken");
      if (token) {
        this.showBottom = true;
      } else {
        this.loginpopflag = true;
        this.$nextTick(() => {
          this.$refs.phoneInp.focus();
        });
      }
    },
    eventIsShow() {
      return Object.keys(this.pmsProductActiveDto).length > 0;
    },
    getProductId() {
      this.productId = this.$route.query?.productId
        ? this.$route.query?.productId
        : new URLSearchParams(window.location.search).get("productId");
      ["openinstalltop"].forEach((item) => {
        this.getopeninstallsdk(item);
      });
    },
    getopeninstallsdk(val) {
      const s = document.createElement("script");
      s.type = "text/javascript";
      s.src = "//web.cdn.openinstall.io/openinstall.js";
      s.addEventListener(
        "load",
        () => {
          var data = OpenInstall.parseUrlParams();
          new OpenInstall(
            {
              appKey: "y23dls", //appkey参数配置,需要自行替换对应的appkey
              channelCode: "",
              onready: function () {
                var m = this,
                  button = document.getElementById(val);
                m.schemeWakeup();
                button.onclick = function () {
                  m.wakeupOrInstall();
                  return false;
                };
              },
            },
            data
          );
        },
        false
      );
      document.head.appendChild(s);
    },
    //获取商品详情
    getProductDetail() {
      // 部署的时候需要打开
      this.getProductId();
      getProduct(this.productId).then(
        // getProduct(147).then(
        (res) => {
          this.getdataflag = "getdata";
          // console.log(res.data.data.skuStockList);
          const { albumPics, pic, video, detailMobileHtml } =
            res.data.data.product;
          this.$nextTick(() => {
            this.$refs.detailhtml.innerHTML = detailMobileHtml;
          });
          this.productDetail = res.data.data.product;
          this.skuStockListData = res.data.data.skuStockList;
          this.spData = JSON.parse(res.data.data.skuStockList[0].spData);
          this.pmsProductActiveDto = res.data.data.pmsProductActiveDto;

          //处理轮播图及视频数据
          this.handleSwiperData(albumPics, pic, video);
        },
        (err) => {
          this.getdataflag = "dataerr";
        }
      );
    },

    //轮播图数据
    handleSwiperData(albumPics, pic, video) {
      if (albumPics) {
        this.swiperData = albumPics.split(",");
      }
      if (pic) {
        this.swiperData.unshift(pic);
      }
      if (video) {
        this.videoData = video;
      }
    },
    //切换图片和视频按钮
    handlePicVideoSwitch() {
      const { picVideoSwitch } = this;
      if (picVideoSwitch === 0) {
        this.picVideoSwitch = 1;
        setTimeout(() => {
          this.picVideoTxt = "视频";
        }, 600);
      }
      if (picVideoSwitch === 1) {
        this.picVideoSwitch = 0;
        setTimeout(() => {
          this.picVideoTxt = "图片";
        }, 600);
      }
    },
  },
};
</script>

<style scoped>
.share-wrapper {
  width: 7.5rem;
  position: relative;
  background-color: #f7f7f7;
  min-height: 100vh;
  overflow: hidden;
}

.havedata {
  position: relative;
  width: 7.5rem;
}

.toplinkcopy {
  position: relative;
  width: 7.5rem;
  height: 1.4rem;
}

.link-app-wrapper {
  position: fixed;
  z-index: 2000;
  width: 7.5rem;
  height: 1.4rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #fff;
  margin-bottom: 0.16rem;
}

.link-app-wrapper .logo-wrapper {
  margin-left: 0.17rem;
}

.link-app-wrapper .logo-wrapper .icon {
  display: block;
  width: 1.8rem;
  height: 0.93rem;
  background: url("@/assets/image/logo-bg.png") no-repeat 0 0/100% 100%;
}

.link-app-wrapper .btn-wrapper {
  display: flex;
  margin-right: 0.17rem;
}

.pic-video-wrapper {
  position: relative;
  background-color: #fff;
}

.pic-video-wrapper .my-swipe .van-swipe-item {
  height: 6.48rem;
}

/* 定义过渡效果 */
.pic-enter-active,
.pic-leave-active {
  transition: opacity 0.6s;
}

.pic-enter,
.pic-leave-to {
  opacity: 0;
}

.video-enter-active,
.video-leave-active {
  transition: opacity 0.6s;
}

.video-enter,
.video-leave-to {
  opacity: 0;
}

.pic-video-wrapper .pic-video-switch {
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: absolute;
  width: 1.4rem;
  height: 0.34rem;
  background: rgba(0, 0, 0, 0.5);
  border-radius: 0.16rem;
  bottom: 1.02rem;
  right: 0.23rem;
  z-index: 999;
}

.pic-video-wrapper .pic-video-switch .txt {
  flex: 1;
  text-align: center;
  color: #fff;
  font-size: 0.2rem;
  line-height: 1;
}

.pic-video-wrapper .pic-video-switch .btn {
  transition: all 0.6s ease-in-out;
  position: absolute;
  left: 1px;
  top: 50%;
  transform: translate(0, -50%);
  width: 0.7rem;
  height: 0.32rem;
  background-color: #fff;
  border-radius: 0.16rem;
  font-size: 0.2rem;
  color: #333;
  line-height: 0.32rem;
  text-align: center;
}

.pic-video-wrapper .pic-video-switch .right-btn {
  left: 0.69rem;
}

.pic-video-wrapper .event-sponsor-wrapper {
  position: relative;
  display: flex;
  justify-content: flex-start;

  margin-top: -0.16rem;
}

.pic-video-wrapper .event-sponsor-wrapper .event {
  z-index: 999;
  position: relative;
  width: 3.02rem;
  height: 0.85rem;
  background: url("@/assets/image/event-bg.png") no-repeat 0 0/100% 100%;
  font-size: 0.4rem;
  color: #fff;
  text-align: center;
  line-height: 0.85rem;
}

.pic-video-wrapper .event-sponsor-wrapper .sponsor {
  z-index: 998;
  position: absolute;
  right: 0;
  bottom: 0.01rem;
  width: 5.24rem;
  height: 1.07rem;
  font-weight: 600;
  background: url("@/assets/image/sponsor-bg.png") no-repeat 0 0/100% 100%;

  font-size: 0.36rem;
  color: #fff;
  text-align: center;
  line-height: 1.26rem;
  text-indent: 0.6rem;
}

.video-container {
  position: relative;
  width: 7.5rem;
  overflow: hidden;
}

video {
  position: relative;
  width: 100%;
  height: auto;
  display: block;
  background-color: #000;
}

.commodity-information-wrapper {
  position: relative;
  margin-top: 0.16rem;
  background-color: #ffffff;
  padding-bottom: 0.13rem;
}

.commodity-information-wrapper .shop-title-txt {
  display: flex;
  position: relative;
  padding-left: 0.17rem;
}

.commodity-information-wrapper .shop-title-txt .icon {
  position: absolute;
  left: 0.17rem;
  top: 0.05rem;
  width: 1.44rem;
  height: 0.48rem;
  background: url("@/assets/image/shop-bg.png") no-repeat 0 0/100% 100%;
}
.commodity-information-wrapper .shop-title-txt .icon2 {
  position: absolute;
  left: 0.17rem;
  top: 0.05rem;
  width: 1.65rem;
  height: 0.48rem;
  font-size: 0.3rem;
  text-align: center;
  line-height: 0.48rem;
  color: #fff;
  background-color: #ff0047;
  border-radius: 0.1rem;
}

.commodity-information-wrapper .shop-title-txt .txt {
  font-size: 0.34rem;
  color: #333333;
  text-indent: 1.84rem;
  line-height: 0.6rem;
  font-weight: 500;
}

.commodity-information-wrapper .shop-price-wrapper {
  padding-left: 0.17rem;
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

.commodity-information-wrapper .shop-price-wrapper .preferential-price {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  margin-right: 0.31rem;
}

.commodity-information-wrapper .shop-price-wrapper .preferential-price .icon {
  font-size: 0.26rem;
  color: #fa2c19;
  line-height: 0.6rem;
  font-weight: 600;
}

.commodity-information-wrapper .shop-price-wrapper .preferential-price .price {
  font-size: 0.5rem;
  color: #fa2c19;
  line-height: 0.6rem;
  margin-right: 0.11rem;
  font-weight: 600;
}

.commodity-information-wrapper .shop-price-wrapper .preferential-price .txt {
  font-size: 0.24rem;
  color: #fa2c19;
  font-weight: 400;
}

.commodity-information-wrapper .shop-price-wrapper .discounted-price {
  display: flex;
}

.commodity-information-wrapper .shop-price-wrapper .discounted-price .txt {
  font-weight: 400;
  font-size: 0.24rem;
  color: #a2a2a2;
  text-align: left;
  font-style: normal;
}
.commodity-information-wrapper .shop-price-wrapper .discounted-price .txt1 {
  margin-right: 0.1rem;
}

.commodity-information-wrapper .shop-rights-and-interests-wrapper {
  margin-top: 0.16rem;
  padding-left: 0.2rem;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: wrap;
}

.commodity-information-wrapper .shop-rights-and-interests-wrapper .return-shop {
  width: 1.73rem;
  height: 0.37rem;
  font-weight: 400;
  font-size: 0.23rem;
  color: #00b272;
  line-height: 0.37rem;
  text-align: center;
  font-style: normal;
  border-radius: 0.06rem;
  border: 0.01rem solid #00b272;
  margin-right: 0.24rem;
}

.commodity-information-wrapper .shop-rights-and-interests-wrapper .full-shop {
  width: 1.22rem;
  height: 0.37rem;
  border-radius: 0.06rem;
  border: 0.01rem solid #ffddbc;
  font-weight: 400;
  font-size: 0.23rem;
  color: #b97127;
  line-height: 0.37rem;
  text-align: center;
  font-style: normal;
}

.commodity-information-wrapper .sales-volume-wrapper {
  margin-top: 0.19rem;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  margin-left: 0.25rem;
}

.commodity-information-wrapper .sales-volume-wrapper .txt {
  font-weight: 400;
  font-size: 0.26rem;
  color: #ababab;
  line-height: 0.37rem;
  font-style: normal;
}

.commodity-information-wrapper .sales-volume-wrapper .segmentation {
  width: 0.02rem;
  height: 0.2rem;
  background-color: #ababab;
  margin: 0 0.25rem 0 0.3rem;
}

.area-specifications-wrapper {
  position: relative;
  margin-top: 0.2rem;
  background-color: #ffffff;
  padding: 0 0.24rem 0.25rem;
}

.area-specifications-wrapper .area-wrapper {
  display: flex;
  justify-content: start;
  align-items: center;
  padding-top: 0.16rem;
}

.area-specifications-wrapper .area-wrapper .icon {
  width: 0.36rem;
  height: 0.36rem;
  background: url("@/assets/image/area-bg.png") no-repeat 0 0/100% 100%;
}

.area-specifications-wrapper .area-wrapper .area-txt {
  font-weight: 400;
  font-size: 0.26rem;
  color: #333333;
  font-style: normal;
}

.area-specifications-wrapper .area-wrapper .express-delivery-wrapper {
  margin-left: 0.37rem;
  font-weight: 400;
  font-size: 0.26rem;
  color: #333333;
  font-style: normal;
}

.area-specifications-wrapper .segmentation {
  width: 100%;
  height: 0.01rem;
  background-color: #d6d6d6;
  margin: 0.27rem 0 0.25rem 0;
}

.area-specifications-wrapper .specifications-wrapper {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.area-specifications-wrapper .specifications-wrapper .icon-txt {
  font-weight: 500;
  font-size: 0.28rem;
  color: #757575;
  font-style: normal;
}

.area-specifications-wrapper .specifications-wrapper .message-txt {
  display: flex;
  justify-content: center;
  align-items: center;
}

.area-specifications-wrapper .specifications-wrapper .message-txt .txt {
  font-weight: 500;
  font-size: 0.28rem;
  color: #757575;
  font-style: normal;
}

.area-specifications-wrapper .specifications-wrapper .message-txt .icon {
  margin-left: 0.23rem;
  font-weight: 500;
  font-size: 0.28rem;
  color: #757575;
  font-style: normal;
}

.picdetaildiv {
  position: relative;
  background: white;
  margin-top: 0.2rem;
  width: 7.5rem;
  display: flex;
  flex-direction: column;
}

.toptitle {
  position: relative;
  width: 7.5rem;
  font-weight: 500;
  font-size: 0.28rem;
  color: #333333;
  margin: 0.15rem 0 0.34rem 0.18rem;
}

.decription {
  width: 7.5rem;
  height: 3rem;
  background-color: red;
}

.detailhtml {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 7.5rem;
  font-size: 0.28rem;
}

.detailhtml :deep(img) {
  width: 7.2rem;
}

.detailhtml pre :deep(p) {
  display: flex;
  flex-direction: column;
  align-items: center !important;
  justify-content: center !important;
}

.detailhtml pre {
  display: flex;
  flex-direction: column;
  align-items: center !important;
  justify-content: center !important;
  white-space: pre-wrap;
  word-break: break-word;
  overflow-wrap: break-word;
  width: 100%;
}

.emptydivtop {
  margin-top: 1.8rem;
}
.botomfix {
  position: fixed;
  bottom: 0;
  z-index: 2000;
}
.loginpopflag {
  display: flex;
  flex-direction: column;
  width: 100%;
  align-items: center;

  height: 6.8rem;
}
.loginpopflag h2 {
  margin-top: 0.3rem;
  font-size: 0.35rem;
  font-weight: 500;
}
.radiodiv {
  font-size: 0.25rem;
  margin-left: 0.1rem;
}
.productdetaildiv :deep(.van-cell__title) {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.productattr {
}
.skeleton {
  padding: 0 1%;
  box-sizing: border-box;
  width: 100%;
  height: 100vh;
  background-color: white;
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow: hidden;
  /* justify-content: center; */
}
.childrenskeleton {
  width: 100%;
  margin-bottom: 3%;
  border-radius: 3%;
  background-color: #f2f3f5;
}
.skeleton :last-child {
  margin-bottom: 0;
}
</style>

